<template>
  <div class="login">
    <ParticlesBg />
    <img :src="logo" alt="logo" class="logo" />
    <div v-loading="alding['getUserInfo']" class="login-box">
      <div class="title">{{ curLogin.title }}</div>
      <DingdingForm v-if="curLogin.type === 'dingding'" @submit="handleSubmit"></DingdingForm>
      <PhoneForm v-else-if="curLogin.type === 'phone'" @submit="handleSubmit"></PhoneForm>
      <VerifyCodeForm
        v-else-if="curLogin.type === 'verifyCode'"
        @submit="handleSubmit"
      ></VerifyCodeForm>
      <EmailFrom v-else-if="curLogin.type === 'email'" @submit="handleSubmit"></EmailFrom>
      <div class="other-types">
        其他登录：
        <span
          v-for="(item, index) in otherLoginTypes"
          :key="item.type"
          class="type"
          @click="loginTypeChange(index)"
        >
          <i :class="`icon iconfont ${item.icon}`"> </i>
          {{ item.name }}
        </span>
      </div>
      <div class="regiter">
        还是没有账号？<el-button type="text" @click="goRegister">立即注册</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import EmailFrom from './components/emailForm';
import DingdingForm from './components/dingdingForm';
import PhoneForm from './components/phoneForm';
import VerifyCodeForm from './components/verifyCodeForm';
import ParticlesBg from '@/components/ParticlesBg';
import logo from '@/assets/imgs/logo.png';
import { mapState, mapMutations } from 'vuex';

export default {
  meta: { title: '登录' },
  components: {
    EmailFrom,
    DingdingForm,
    PhoneForm,
    VerifyCodeForm,
    ParticlesBg,
  },
  data() {
    return {
      isLogin: false,
      loading: false,
      fromData: {},
      logo,
      curLogin: {},
      loginTypes: [
        {
          name: '邮箱账号',
          type: 'email',
          icon: 'icon-youxiang',
          title: '邮箱账号登录',
        },
        {
          name: '手机验证码',
          type: 'verifyCode',
          icon: 'icon-yanzhengma',
          title: '手机验证码登录',
        },
        {
          name: '手机账号',
          type: 'phone',
          icon: 'icon-shouji',
          title: '手机号登录',
        },
        {
          name: '钉钉扫码',
          type: 'dingding',
          icon: 'icon-dingding-fill',
          title: '钉钉扫码登录',
        },
      ],
    };
  },
  computed: {
    otherLoginTypes() {
      return this.loginTypes.filter(item => item.type !== this.curLogin.type);
    },
  },
  created() {
    this.curLogin = this.loginTypes[0];
    this.checkLogin();
  },
  methods: {
    ...mapMutations({
      setStoreState: 'setState',
    }),
    //
    checkLogin() {
      this.$api('getUserInfo');
    },
    login(data) {
      if (this.loading) {
        return false;
      }
      this.loading = true;
      this.$api('login', data)
        .then(res => {
          this.loading = false;
          this.goTarget();
          this.$message.success({
            message: '登录成功',
            duration: 2000,
          });
        })
        .catch(e => {
          console.error(e);
          this.$message.success({
            message: '登录失败',
          });
          this.loading = false;
        });
    },
    handleSubmit(data) {
      this.login(data);
    },
    goTarget() {
      const { currentPath } = this.$route.query;
      this.$router.replace(currentPath || '/');
    },
    loginTypeChange(index) {
      const item = this.otherLoginTypes[index];
      this.curLogin = item;
    },
    goRegister() {
      this.$router.replace('/account/register');
    },
  },
};
</script>
<style lang="less" scoped>
@import url('@/styles/variable.less');
.login {
  min-height: 100vh;
  background-color: #002140;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  .logo {
    height: 50px;
    margin-bottom: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .login-box {
    background-color: #fff;
    position: relative;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
    padding: 40px 20px;
    form {
      min-width: 320px;
    }
  }

  /deep/ .el-input__inner {
    border-radius: 0;
    border: none;
  }
  /deep/ .el-form-item__content {
    padding-bottom: 5px;
    border-bottom: 1px solid #dcdfe6;
  }
  .title {
    color: #001529;
    text-align: center;
    margin-bottom: 40px;
    font-size: 20px;
  }
  .el-form-item {
    &:last-child {
      margin-bottom: 0;
    }
  }
  .other-types {
    font-size: 12px;
    color: #aaa;
    text-align: left;
    margin-top: 30px;
    .type {
      color: #606266;
      display: inline-flex;
      align-items: center;
      margin-right: 10px;
      cursor: default;
      &:last-child {
        margin-right: 0;
      }
      .icon {
        margin-right: 5px;
      }
    }
  }
  .regiter {
    font-size: 12px;
  }
  /deep/ .login-btn {
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
